<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: solid;
            box-sizing: border-box;
        }
        .grid {
            display: flex; flex-wrap: wrap;
        } 
        .grid .gird-cell { 
            flex: 0 0 auto;
        } 
        .grid-cell.col-1 {
            flex: 0 0 8.33333%;    
        }
        .grid-cell.col-2 {
            flex: 0 0 16.66666%;    
        }
        .grid-cell.col-3 {
            flex: 0 0 25%;    
        }
        .grid-cell.col-4 {
            flex: 0 0 33.33333%;    
        }
        .grid-cell.col-5 {
            flex: 0 0 41.66666%;    
        }
        .grid-cell.col-6 {
            flex: 0 0 50%;    
        }
        .grid-cell.col-7 {
            flex: 0 0 58.33333%;    
        }
        .grid-cell.col-8 {
            flex: 0 0 6.66666%;    
        }
        .grid-cell.col-9 {
            flex: 0 0 75%;    
        }
        .grid-cell.col-10 {
            flex: 0 0 83.33333%;    
        }
        .grid-cell.col-11 {
            flex: 0 0 91.66666%;    
        }
        .grid-cell.col-12 {
            flex: 0 0 100%;    
        }

        .grid.grid-top {
            align-items: flex-start;
        }
        .grid.grid-middle {
            align-items: center;
        }
        .grid.grid-bottom {
            align-items: flex-end;
        }
        .grid.grid-stretch {
            align-items: stretch;
        }
        .grid.grid-baseline {
            align-items: baseline;
        }

        .grid.grid-left {
            justify-content: flex-start;
        }
        .grid.grid-center {
            justify-content: center; 
        }
        .grid.grid-right {
            justify-content: flex-end; 
        }
        .grid.grid-between {
            justify-content: space-between;
        }
        .grid.grid-around {
            justify-content: space-around; 
        }
        .grid.grid-evenly {
            justify-content: space-evenly; 
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="grid-cell col-1">1</div>
        <div class="grid-cell col-2">2</div>
        <div class="grid-cell col-3">3</div>
        <div class="grid-cell col-4">4</div>
        <div class="grid-cell col-5">5</div>
        <div class="grid-cell col-6">6</div>
        <div class="grid-cell col-7">7</div>
        <div class="grid-cell col-8">8</div>
        <div class="grid-cell col-9">9</div>
        <div class="grid-cell col-10">
            <div class="grid grid-middle" style="height: 200px;">
                <div class="grid-cell col-2" style="height: 80px;font-size: 2rem;">2</div>
                <div class="grid-cell col-3" style="height: 100px;font-size: 3rem;">3</div>
                <div class="grid-cell col-4">4</div>
            </div>
        </div>
        <div class="grid-cell col-11 grid grid-evenly">
            <div class="grid-cell col-2">2</div>
            <div class="grid-cell col-3">3</div>
            <div class="grid-cell col-4">4</div>
        </div>
        <div class="grid-cell col-12">12</div>
    </div>
</body>
</html>